import { observer } from "mobx-react-lite"
import TodoCompleted from "./TodoCompleted"
import "./style.css"
import TodoRmove from "./TodoRmove"
import TodoEtiding from "./TodoEtiding"
import classname from "classnames"
import Editing from "./Editing"
function Todo({ todo }) {
    return (<li className={classname({
        "box":todo.isCompleted,
        "editing":todo.isEditing
    })}> 
    <div className="view">
    <TodoCompleted todo={todo} />
     <TodoEtiding todo={todo} />
    <TodoRmove id={todo.id}/>
    </div>
    <Editing todo={todo}/> 
    </li>)
}

export default observer(Todo) 

